<template>
	<view v-if="canshow" class="pop-select-package">
		<view class="select-head">
			<image class="package-image" :src="$urlPrefix+goods.packages[nowSelectPackageIndex].image" mode="aspectFit">
			</image>
			<view class="package-info">
				<text class="info-title">已选：{{goods.packages[nowSelectPackageIndex].title}}</text>
				<text class="info-num">剩余：{{goods.packages[nowSelectPackageIndex].num}}件</text>
				<text class="info-price">¥{{goods.packages[nowSelectPackageIndex].price}}</text>
			</view>
		</view>
		<view class="select-body">
			<text style="color: #78777a;margin: 20rpx;overflow: auto;"
				:style="{height:screenHeight/7.5+'rpx'}">{{goods.packages[nowSelectPackageIndex].describe}}</text>
			<scroll-view scroll-y="true" :style="{height:screenHeight/2+'rpx'}">
				<button v-for="(item,index) in goods.packages" :key="index"
					:class="(index === nowSelectPackageIndex) ? 'body-button-on_select':'body-button'"
					@click.stop="selectPackage(index)" hover-class="none">{{item.title}}
				</button>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			goods:{
				type:Object,
				default(){
					return {}
				}
			},
			nowSelectPackageIndex:{
				type:Number,
				default:0
			}
		},
		created() { 
			//console.log(this.goods);
			this.canshow = true
		},
		name:"goods-detail-select-package",
		data() {
			return {
				screenHeight:this.$screenHeight,
				canshow:false
			};
		},
		methods:{
			selectPackage(i){
				this.$emit("selectPackage",i)
			}
		}
	}
</script>

<style lang="scss">
	.pop-select-package {
		display: flex;
		flex-direction: column;
	
		.select-head {
			display: flex;
			flex-direction: row;
			height: 160rpx;
			padding: 30rpx;
			width: 100%;
			box-shadow: 0rpx 6rpx 20rpx #C0C0C0;
	
			.package-image {
				height: 100%;
				width: 160rpx;
				border: 1rpx #e2e2e2 solid;
			}
	
			.package-info {
				display: flex;
				flex-direction: column;
				height: 100%;
				justify-content: center;
				margin-left: 20rpx;
	
				.info-num {
					margin-top: 10rpx;
				}
	
				.info-price {
					color: red;
					margin-top: 10rpx;
				}
			}
		}
	
		.select-body {
			//border: 2rpx red solid;
			display: flex;
			flex-direction: column;
			width: 100%;
	
			.body-button {
				width: 500rpx;
				height: 60rpx;
				font-size: 28rpx;
				margin-top: 30rpx;
				overflow: hidden;
			}
	
			.body-button-on_select {
				width: 500rpx;
				height: 60rpx;
				font-size: 28rpx;
				margin-top: 30rpx;
				overflow: hidden;
				border: 2rpx #2FB6FF solid;
			}
		}
	}
</style>
